<template>
    <div>
    <div class="banner"  @click='handleshowGallary'>
       <img class='banner-img' :src="bannerImg" alt="">
       <div class="banner-bottom">
           <div class="title">欢迎来到美丽的</div>
           <div class="count">39<span class="iconf back-icon">&#xe622;</span></div>
       </div>
    </div>
    <fade-animation>
      <detail-gallary :imgList='gallaryImgs' v-show='showGallary' @closeGallary='handleCloseGallary'></detail-gallary>
    </fade-animation>
    </div>
</template>
<script>
import DetailGallary from 'common/gallary/Gallary'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'DetailBanner',
  components: {
    DetailGallary,
    FadeAnimation
  },
  props: {
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      showGallary: false,
      imgList: ['http://img1.qunarzz.com/sight/p0/201311/07/16d8335219ec4e3cc8d65eac.jpg_r_800x800_15de646a.jpg',
        'http://img1.qunarzz.com/sight/p0/201311/07/5b7c5c9696f0369bc8d65eac.jpg_350x240_7e426ad3.jpg']
    }
  },
  methods: {
    handleshowGallary () {
      this.showGallary = true
    },
    handleCloseGallary () {
      this.showGallary = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.banner
    overflow :hidden
    position relative
    height: 0
    padding-bottom:55%
    .banner-img
        width:100%
    .banner-bottom
        position :absolute
        bottom :0
        left:0
        right:0
        line-height:.6rem
        height:.6rem
        display :flex
        align-items :center
        color:#fff
        background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
        padding:0 .2rem
        .title
            flex:1
        .count
            padding:0 .2rem
            background :#000
            border-radius:.4rem
            height:.4rem
            line-height :.4rem
</style>
